<!--
 * @Author: boyyang
 * @Date: 2022-01-29 18:24:46
 * @LastEditTime: 2022-02-12 22:33:54
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\blogDetail\index.vue
-->

<template>
    <!-- <div class="blog-detail"> -->
        <blog-detail
            :background-url="blog.avatarUrl"
            :blog-title="blog.blogTitle"
            :blog-content="blog.blogContent"
            :blog-desc="blog.blogDesc"
            :blog-bg="blog.blogBg"
            :blog-id="blog.blogId"
            @reload="reload"
        ></blog-detail>
    <!-- </div> -->
</template>

<script lang="ts" setup>
import blogDetail from './components/blogDetail.vue'
import { findDataById } from '@/cloudbase'
const route = useRoute()

interface IBlog {
    avatarUrl?: string;
    blogTitle?: string;
    blogContent?: string;
    blogDesc?: string;
    blogBg?: string;
    blogId?: string;
}

let blog = ref<IBlog>({
    avatarUrl: '',
    blogTitle: '',
    blogContent: '',
    blogDesc: '',
    blogBg: '',
})

let _id = route.query.id as string


onMounted(() => {
    getBlogDetail()
})


const reload = () => {
    getBlogDetail()
}

const getBlogDetail = () => {
    findDataById('usersBlog', _id).then((res) => {
        let { avatarUrl, blogTitle, blogContent, blogDesc, blogBg, _openid } = res.data[0]
        blog.value.avatarUrl = avatarUrl
        blog.value.blogTitle = blogTitle
        blog.value.blogContent = blogContent
        blog.value.blogDesc = blogDesc
        blog.value.blogBg = blogBg,
        blog.value.blogId = _openid
    })
}

</script>

<style scoped>
</style>
